<template>
	<div id="toast" v-show="isShow">
		{{message}}
	</div>
</template>

<script>
	export default {
		name: 'Toast',
		// props:{
		// 	message:{
		// 		type:String,
		// 		default:''
		// 	},
		// 	isShow:{
		// 		type:Boolean,
		// 		default:false
		// 	}
		// },
		data(){
			return{
				message:'',
				isShow:false
			}
		},
		methods:{
			show(message, duration=1500){
				this.isShow=true
				this.message = message
				
				setTimeout(() => {
					
					this.isShow=false
					this.message = ''
				}, duration);
			}
		}
	}
</script>

<style>
	#toast{
		position: fixed;
		top: 50%;
		left: 50%;
		background-color: rgba(0,0,0,.7);
		transform: translate(-50%,-50%);
		color: #FFFFFF;
		padding: 10px;
		border-radius: 5px;
	}
</style>
